<template>
  <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-2 flex overflow-hidden" v-if="data">
    <!-- <div class="container"> -->
    <!-- 左边 -->
    <div class="flex-1 mr-3 p-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData"/>
      <!-- 数据传递关系图 -->
      <Relation class="h-1/3 " :data="data.relationData" />

    </div>
    <!-- 中间 -->
    <div class="w-1/2 mr-3 flex flex-col ">
      <!-- 数据展示图 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3 " :data="data.totalData" />
      <!-- 地图可视化 -->
      <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData"/>

    </div>
    <!-- 右边 -->
    <div class="flex-1 p-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData"/>
      <!-- 环形资源站比图 -->
      <RadiueBar class="h-1/3 box-border pb-4" :data="data.abnormalData"/>
      <!-- 文档云图 -->
      <WordCloud class="h-1/3 " :data="data.wordCloudData"/>

    </div>
  </div>
</template>



<script setup>
// 引入
import HorizontalBar from './components/HorizontalBar.vue';
import RadarBar from './components/RadarBar.vue';
import Relation from './components/Relation.vue';
import TotalData from './components/TotalData.vue';
import MapChart from './components/MapChart.vue';
import VerticalBar from './components/VerticalBar.vue';
import RadiueBar from './components/RadiueBar.vue';
import WordCloud from './components/WordCloud.vue';

// 方法--获取数据
import { getVisualization } from './api/visualization.js';
// import { getVisualization } from '@/api/visualization.js';

import { ref } from 'vue'

// 数据
const data = ref(null);



// 方法
const loadData = async () => {
  data.value = await getVisualization()
  console.log('------总数据------')
  console.log(data.value) // 获取到的数据
  console.log('------^^^------')
}
// loadData()
// 没三秒获取移除数据
setInterval(() => {
  loadData()
}, 3000)




</script>

<!-- <style lang="scss" scoped>
// .container {
//   background-image: url("assets/imgs/bg.jpg"); /* 设置背景图像 */
//   background-size: cover; /* 背景覆盖 */
//   background-position: center; /* 背景居中 */
//   height: 100vh; /* 高度为视口高度 */
//   color: white; /* 文本颜色为白色 */
//   padding: 0.5rem; /* 内边距 */
//   display: flex; /* 使用 Flexbox 布局 */
//   overflow: hidden; /* 隐藏超出部分 */
// }
</style> -->